<template>
    <div id="footer">
        <ul class="tab-list">  
            <router-link tag="li" :to=path class="tab-item" :class="{active:routerActive==true}">
                <i class="icon icon-home"></i>
                <span>首页</span>
            </router-link>
            <router-link tag="li" to="/earnMoney" class="tab-item">
                <i class="icon icon-earn"></i>
                <span>赚金</span>
            </router-link>
            <router-link tag="li" to="/rebate" class="tab-item fanli">
                <div class="fanli-btn"></div>
                <span>申请返利</span>
            </router-link>
            <router-link tag="li" to="/userFriend" class="tab-item">
                <i class="icon icon-earnMoney"></i>
                <span>邀请</span>
            </router-link>
             <router-link tag="li" to="/user" class="tab-item">
                <i class="icon icon-user"></i>
                <span>我的</span>
             </router-link>
        </ul>
    </div>
</template>

<script>
    import { mapState} from 'vuex'
    export default {
        data(){
            return{
            }
        },
        computed:{
            routerActive() {
            let route = this.$route.name;
                if((route=="btgame")||(route=="discount")||(route=="h5game")||(route=="danji")||(route=="promise")){
                    return true;
                }else{
                    return false;
                }
            },
            ...mapState(['path']),
        }
    }
</script>

<style scoped lang="scss">
    @import '~styles/variable';
    @import '~styles/mixins';
    #footer{
        position:fixed;
        bottom:0;
        left:0;
        z-index:99;
        width:100%;
        height:1rem;
        z-index:999;
        .tab-list{
            display:flex;
            height:100%;
            width: 7.5rem;
            margin:0 auto;
            background:#fff;
            border-top:1px solid #ddd;
            li{
                position:relative;
                padding-top:0.1rem;
                height:100%;
                flex:1;
                display:flex;
                align-items:center;
                justify-content: space-around;
                flex-direction:column;
                align-content:space-around;
                color:$color-text;
                &.router-link-active,&.active{
                    span{
                        color:$color-focus;
                    }
                    .icon-home{
                        @include bg-image('../assets/image/icon_home_pre');
                    }
                    .icon-earn{
                        @include bg-image('../assets/image/icon_money_pre');
                    }
                    .icon-earnMoney{
                         @include bg-image('../assets/image/icon_yaoqing_pre');
                    }
                    .icon-user{
                         @include bg-image('../assets/image/icon_me_pre');
                    }
                }
                &.fanli{
                    span{
                        margin-top:0.46rem;
                    }
                }
            }
        }
    }
    .icon{
        display:block;
        width:0.42rem;
        height:0.4rem;
        background-size: 0.42rem 0.4rem;
        background-repeat: no-repeat;
    }
    .icon-home{
         @include bg-image('../assets/image/icon_home');
    }
    .icon-earn{
         width:0.4rem;
         background-size: 0.4rem 0.4rem;
         @include bg-image('../assets/image/icon_money');
    }
    .fanli-btn{
        position:absolute;
        top:-0.36rem;
        left: 50%;
        margin-left: -0.5rem;
        width:1rem;
        height:1rem;
        background-size:1rem 1rem;
        @include bg-image('../assets/image/icon_sqfl');
    }
    .icon-earnMoney{
         @include bg-image('../assets/image/icon_yaoqing');
    }
    .icon-user{
         @include bg-image('../assets/image/icon_me');
    }
</style>